<template>
  <!-- 案件入库 -->
  <div class="app-container">
    <el-card shadow="always">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="办案单位" prop="uhId">
              <el-select
                style="width: 100%"
                @change="uhIdChange"
                v-model="formData.uhId"
                filterable
                placeholder="请选择办案单位"
              >
                <el-option
                  v-for="item in uhIdOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="办案人员" prop="phName">
              <el-select
                style="width: 100%"
                v-model="formData.phName"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择办案人员"
                v-if="formData.uhId"
              >
                <el-option
                  v-for="item in phNameOptions.filter((e) => e.value === formData.uhId)"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
              <el-select
                v-else
                style="width: 100%"
                v-model="formData.phName"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择办案人员"
              >
                <el-option
                  v-for="item in phNameOptions"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="当事人" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入当事人"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="户籍地址" prop="address">
              <el-input
                v-model="formData.address"
                placeholder="请输入户籍地址"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="执法案由" prop="cause">
              <el-input
                v-model="formData.cause"
                placeholder="请输入执法案由"
                clearable
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker
                v-model="formData.createTime"
                format="HH:mm:ss"
                value-format="HH:mm:ss"
                :style="{ width: '100%' }"
                placeholder="请输入创建时间"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="更新时间" prop="updateTime">
              <el-date-picker
                v-model="formData.updateTime"
                format="HH:mm:ss"
                value-format="HH:mm:ss"
                :style="{ width: '100%' }"
                placeholder="请选择更新时间"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="强制措施" prop="isCoercive">
              <el-select
                v-model="formData.isCoercive"
                placeholder="请输入强制措施"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in isCoerciveOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="性别" prop="sex">
              <el-select
                v-model="formData.sex"
                placeholder="请选择性别"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.fianncial_registry_sex"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号码" prop="phone">
              <el-input
                v-model="formData.phone"
                placeholder="请输入手机号码"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="执法地点" prop="lawAddress">
              <el-input
                v-model="formData.lawAddress"
                placeholder="请输入执法地点"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="display: flex; justify-content: flex-end">
              <el-button class="bg-color-2d" @click="getList">搜索</el-button>
              <el-button class="da" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-row>
      <el-col
        :span="24"
        style="margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: flex-end"
      >
        <el-button class="regist" type="primary" @click="registerDispose">登记</el-button>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table :row-class-name="tableRowClassName" stripe v-loading="loading" :data="disposalList">
      <el-table-column label="序号" align="center" prop="index">
        <template slot-scope="scope">
          {{ scope.row.index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="文书编号" align="center">
        <template v-slot="{ row }">
          <router-link :to="{ path: '/property/party', query: { id: row.id, name: row.name } }">{{
            row.caseNum
          }}</router-link>
        </template>
      </el-table-column>
      <el-table-column label="当事人" align="center" prop="name" />
      <el-table-column label="性别" align="center" prop="sex" />
      <el-table-column label="手机号" align="center" prop="phone" />
      <el-table-column label="身份证号" align="center" prop="idCardNo" />
      <el-table-column label="执法地点" align="center" prop="lawAddress" />
      <el-table-column label="现场照片" align="center" prop="imgUrl" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.imgUrl ? scope.row.imgUrl : ''" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column label="办案人员" align="center" prop="phName" />
      <el-table-column label="登记时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="
              $router.push({
                path: '/property/party',
                query: { id: scope.row.id, name: scope.row.name }
              })
            "
            >当事人详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="bottom">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="paging"
      />
    </div>
  </div>
</template>
<script>
import { getRegistryList } from '@/api/property/registerInfo.js'
import { unitDispose, personnelDispose } from '@/api/property/dispose.js'
export default {
  components: {},
  props: [],
  dicts: ['fianncial_registry_sex'],
  data() {
    return {
      rules: {
        phone: [
          {
            pattern: /^1\d{10}$/,
            message: '手机号格式错误'
          }
        ]
      },
      // 列表
      disposalList: [],
      formData: {
        uhId: null,
        phName: [],
        name: null,
        address: null,
        cause: null,
        createTime: null,
        updateTime: null,
        isCoercive: null,
        sex: null,
        phone: null,
        lawAddress: null
      },
      uhIdOptions: [],
      phNameOptions: [],
      isCoerciveOptions: [
        {
          label: '扣押',
          value: '1'
        },
        {
          label: '先行扣押登记',
          value: '2'
        }
      ],
      // 遮罩层
      loading: false,
      // 页数
      pageNum: 1,
      // 页大小
      pageSize: 10,
      // 总页数
      total: 0,
      eef: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // 获取案件列表
    this.getList()

    // 处理办案单位数据
    unitDispose().then((e) => {
      this.uhIdOptions = e
    })

    // 处理办案人员数据
    personnelDispose().then((e) => {
      this.phNameOptions = e
    })
  },
  methods: {
    // 修改办案单位清空办案人员
    uhIdChange() {
      this.formData.phName = []
    },

    // 登记物品详情
    updateList(e) {
      this.$router.push({ path: '/property/' + text, query: { id: e } })
    },

    // 获取案件列表 搜索
    getList() {
      this.loading = true
      getRegistryList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.formData,
        phName: this.formData.phName.join(',')
      }).then((res) => {
        this.disposalList = res.rows
        this.total = res.total
        this.loading = false
      })
    },

    // 分页
    paging(res) {
      this.pageNum = res.page
      this.pageSize = res.limit
      this.$nextTick(() => {
        this.getList()
      })
    },

    // 把表格每一行的索引放进 row
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },

    // 登记处置
    registerDispose() {
      this.$router.push('/property/registry')
    },

    // 重置
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.pageNum = 1
      // this.pageSize = 10
      this.getList()
    }
  }
}
</script>
<style></style>
